﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .headers {
            display: flex;
            justify-content: center;
            align-content: center;
            margin-top: 50px;
        }
        .headers > div {
            display: flex;
            justify-content: center;
            align-content: center;
            margin-right: 20px;
        }
        #table1 {
            display: flex;
            justify-content: center;
            align-content: center;
            margin-top: 150px;
            height: calc(100vh - 250px);
        }
        table,table tr th, table tr td { border:1px solid #0094ff; }
        table { width: 600px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse; padding:2px;}
    </style>
</head>
<div style="width: 1200px; border: 1px solid #0094ff; margin: auto">
    <div class="headers">
        <div>
            <span>主机：</span>
            <input class="headersInput" value="" type="text">
        </div>
        <div>
            <span>模块：</span>
            <input class="headersModelInput" type="text">
        </div>
        <button class="getData">发送</button>
    </div>
    <div id="table1">
        <table>
            <tr>
                <td>序号</td>
                <td>Code</td>
                <td>状态</td>
                <td>标签</td>
            </tr>
        </table>
    </div>
</div>
<body>
<script>
    let getData = document.querySelector('.getData')
    getData.addEventListener('click', () => {
        let data = ''
        data += " <table >"
        data += " <tr>" + "<td >Code</td>" + "<td >序号</td>" +  "<td >状态</td>" + "<td >标签</td>" + "</tr>";
        // 获取模块数据
        let inputData = document.querySelector('.headersModelInput').value
        // 渲染主机数据
        let ws = new WebSocket("ws://192.168.0.99:8082/websocket");

        ws.onopen = function(evt) {
            console.log("Connection open ...");
            ws.send(inputData);
        };

        ws.onmessage = function(evt) {
            // console.log( "Received Message: " + evt.data);
            let dataList = JSON.parse(evt.data)
            console.log(dataList)
            // 循环渲染表格数据
            for (let i = 0; i < dataList.length; i++) {
                data+= ` <tr>
             <td>${i+1}</td>
             <td>${dataList[i].code}</td>
             <td>${dataList[i].status}</td>
             <td>${dataList[i].tag}</td>
             </tr>
            `
            }
            data += "</table>";
            document.querySelector('.headersInput').value = dataList[0].miniCode
            document.getElementById("table1").innerHTML = data
            ws.close();
        };

        ws.onclose = function(evt) {
            console.log("Connection closed.");
        };
    })
</script>
</body>
</html>
